﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>加载方式</title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="code"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 15px;
            padding-top: 40px;
        }
    </style>
</head>
<body>

    <h2>说明</h2>
    <div class="card card-color-orange">
        rayui是在jquery的基础上开发的，依赖jquery，所以加载的时候需要先引入jquery，项目开发使用的jquery版本为1.12.4
    </div>


    <h2>加载方式</h2>
    <h3 class="spliter">1、使用use函数异步加载</h3>
    <div class="card">
        这种方式和layui没有什么区别，不过代码实现上写的有点差，实际测试加载没有layui加载的快，总是慢10几毫秒，这种加载方式均为异步加载
    </div>


<pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "异步加载"}'>

rayui.use(["",""], function(){
    //你的代码
})

</pre>


    <h3 class="spliter">2、script标签use属性同步加载</h3>
    <div class="card">
        严格来说不应该叫同步加载，因为它的加载方式依赖rayui.js的加载方式
    </div>
    <div class="card">
        rayui.ready的实现是在jquery.ready的基础上实现的，所以此时dom已经加载完毕，所以代码里没有必要再嵌入一级$(function(){})了，不过嵌入也没关系^-^
    </div>

    <div class="card">
        这种加载方式一定要用rayui.ready，不能使用jquery的ready函数，因为有可能组件没有加载完毕就进行了使用，此时组件对象为空
    </div>
<pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "同步加载"}'>
&lt;script src="../src/js/rayui.js" use="form,select,checkbox,swich">&lt;/script>
......

&lt;script>
    rayui.ready(function(){
        var swich = form.swich;
        ........

    });

&lt;/script>
</pre>



    <h2>组件开发</h2>
    <div class="card">
        使用define函数进行组件开发，和layui一样，不同的是增加了一个参数，同步异步标记rayui.jsAsync()
    </div>
    <div class="card">
        rayui.jsAsync()参数不能省略，否则无法使用上面的第2种同步加载方式
    </div>
    <pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "组件开发"}'>

 ;rayui.define(["jqlibs", "layer"], function (exports, undef) {
    "use strict";

    //你的组件代码

}, rayui.jsAsync()); //rayui.jsAsync()参数不能省略，否则无法使用上面的第2中同步加载方式

</pre>







    <script>
        rayui.ready(function () {
            var code = rayui.code;
            code.render();
        })
    </script>

</body>
</html>